<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>The Studio</title>
<link href="./css/style.css" rel="stylesheet" type="text/css" />
<link href="./css/jquery_dropdown_menu.css" rel="stylesheet" type="text/css" />

<script src="./javascript/jquery.js" type="text/javascript"></script>
<script src="./javascript/custom.js" type="text/javascript"></script>

<!-- Cufon JavaScript Files -->
<script src="./javascript/cufon-yui.js" type="text/javascript"></script>
<script src="./javascript/kabel-font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1, h2, h3, h4, .quote')
</script>

<!-- Form validation JavaScript Files -->
<script src="./javascript/jquery.formvalidation.js" type="text/javascript"></script>
<script src="./javascript/additional-methods.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#form").validate();
	$("#newsletter").validate();
});
</script>

<!-- Scroll JavaScript Files -->
<script src="./javascript/scroll.js" type="text/javascript"> </script>
<script type="text/javascript"> 
  $(document).ready(function(){ 
    $.localScroll(); 
  }); 
</script>

<meta charset="UTF-8"></head>

<body>

<div id="wrapper">

	<div id="header">
	
		<div class="logo"><a href="#"><img src="./images/logo.png" alt="logo" /></a></div>
	
			<div id="myslidemenu" class="jqueryslidemenu">
				<ul>
					<li><a href="./index.html">Home</a>
						<ul>			 
							<li><a href="./index.html">Slideshow</a></li>
							<li><a href="./index2.html">Slideshow - Curtain effect</a></li>
									<li><a href="./index3.html">Anything Slider</a></li>
						</ul><!--END ul home-->
					</li>
					
					<li><a href="./about.html">About</a></li>
					
					<li><a href="#">Features</a>
						<ul>
							<li><a href="#">Index page &raquo;</a>
								<ul>
									<li><a href="./index.html">Slideshow - Fading</a></li>
									<li><a href="./index2.html">Slideshow - Curtain effect</a></li>
									<li><a href="./index3.html">Anything Slider</a></li>
								</ul><!--END ul index page-->
							</li>
							<li><a href="./about.html">About page</a></li>			
							<li><a href="./services.html">Services page</a></li>
							<li><a href="./portfolio.html">Portfolio - Grid view</a></li>
							<li><a href="./portfolio2.html">Portfolio - List view</a></li>
							<li><a href="./portfolio3.html">Portfolio - Thumb view</a></li>
							<li><a href="./blog.html">Blog page</a></li>
							<li><a href="./blog-single.html">Blog single page</a></li>
							<li><a href="./contact.html">Contact page</a></li>
						</ul><!--END ul features-->
					</li>
						
					<li><a href="./elements.html">Style</a>
						<ul>
							<li><a href="./elements.html">Elements page</a></li>			
							<li><a href="./full-width-page.html">Full width page</a></li>															
							<li><a href="#">Template's colors &raquo;</a>
								<ul>
									<li><a href="http://brankic1979.com/theme/Thestudio/dark/">Dark</a></li>
									<li><a href="./index.html">Grey</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/blue/">Blue</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/aquamarine/">Deep blue</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/red/">Red</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/green/">Green</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/yellow/">Yellow</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/orange/">Orange</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/magenta/">Magenta</a></li>
								</ul><!--END ul template's colors-->
							</li>						
							<li><a href="#">Header &raquo;</a>
								<ul>
									<li><a href="./index.html">Twitter update</a></li>
									<li><a href="./blog-single.html">Breadcrumb pagination</a></li>
								</ul><!--END ul header-->
							</li>							
							<li><a href="#">Footer &raquo;</a>
								<ul>
									<li><a href="./about.html#footer">Style 1</a></li>
									<li><a href="./contact.html#footer">Style 2</a></li>
								</ul><!--END ul footer-->
							</li>
						</ul><!--END ul style-->
					</li>	
					
					<li><a href="./services.html">Services</a></li>
					
					<li><a href="./portfolio.html">Portfolio</a>	
						<ul>
							<li><a href="./portfolio.html">Portfolio - Grid view</a></li>
							<li><a href="./portfolio2.html">Portfolio - List view</a></li>
							<li><a href="./portfolio3.html">Portfolio - Thumb view</a></li>
						</ul><!--END ul portfolio-->						
					</li>
					
					<li><a href="./blog.html">Blog</a></li>
					
					<li><a href="./contact.html" class="current">Contact</a></li>
				</ul><!--END ul-->
			</div><!--END jqueryslidemenu-->
	
				<span class="quote">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
	
					<form id="search" name="search" method="post" action="#">
						<input name="s" type="text" id="s" value="Search the site" onblur="if (this.value == ''){this.value = 'Search the site'; }" onfocus="if (this.value == 'Search the site') {this.value = ''; }" />
						<input name="" type="image" src="./images/input-search-button.gif" class="search_button" />
					</form><!--END search-->
		
	</div><!--END header-->
	
	<div id="center_holder">
	<div class="twitter">Not sure why I'm still awake at 1AM. Might be due to the fact I'm receiving new emails every 2-5 minutes. <a href="#">about 21 hours ago</a>	
	<a href="#" class="follow-me toolTip"  title="Follow me on Twitter.">follow me</a>
	</div><!--END twitter-->
	</div><!--END twitter holder-->	
	
	<div id="content">
	
		<div id="contact_map">
			<iframe width="525" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=amsterdam&amp;sll=37.0625,-95.677068&amp;sspn=35.547176,79.013672&amp;ie=UTF8&amp;hq=&amp;hnear=Amsterdam,+North+Holland,+The+Netherlands&amp;ll=52.373922,4.890976&amp;spn=0.1048,0.359802&amp;z=11&amp;iwloc=A&amp;output=embed"></iframe>
		</div>
		
		<div class="contact_info">
	  	<ul>
			<li><h3>Visit us </h3></li>
			<li>PO Box No 12345</li>
			<li>Some guy`s name St, Town</li>
			<li>New Something 1234, Country</li>
			<li class="divider"></li>
			<li><h3>Call us </h3></li>
			<li>Telephone/Fax: 1234 5678</li>
			<li>Telephone/Fax: 1234 5678</li>
			<li class="divider"></li>
			<li><h3>Email us</h3></li>
			<li>General: <a href="#">ouremail@planetearth.com</a></li>
			<li>Support: <a href="#">ouremail@planetearth.com</a></li>
			<li>Join our team: <a href="#">ouremail@planetearth.com</a></li>
		</ul>
		</div>
		
		
		
		
		
<form id="form" class="contactForm" method="post" action="send.php">
<h1>Get in touch</h1>

<div class="holder">
	<p>To send us a message or just to say hello, please complete the form on the right or contact us via details listed above. We'll get back to you asap.</p>
	</div>
	
	<div class="holder">
	<div>
		<label>NAME: <em>Required</em></label>
		<input name="name" type="text" class="required" />
	</div>
	<div>
		<label>PHONE: <em>Required</em></label>
		<input name="phone" type="text" class="required digits" />	
		<!--<input name="phone" type="text" class="required phone" />  THIS IS FOR US PHONE NUMBERS ONLY-->		
	</div>
	<div>
		<label>EMAIL: <em>Required</em></label>
		<input name="email" type="text" class="required email" />		
	</div>
	</div>
	
	<div class="holder">
	<div>
		<label>MESSAGE:</label>
		<textarea name="message" rows="6" cols="60"></textarea>		
	</div>
	<div>
		<input value="Submit" type="submit" class="submit toolTip" title="Please make sure you filled out all required fields." />
	</div>
	</div>
	
</form>
	
    </div><!--END content-->
	
<div id="footer">
	<div class="bottom">

		<div class="flickr">
		<h4>Flickr</h4>
			<ul>
				<li><a href="#"><img src="./images/blog-thumb1.jpg" alt="" /></a></li>
				<li><a href="#"><img src="./images/blog-thumb2.jpg" alt="" /></a></li>
				<li><a href="#"><img src="./images/blog-thumb3.jpg" alt="" /></a></li>
				<li><a href="#"><img src="./images/blog-thumb4.jpg" alt="" /></a></li>
				<li><a href="#"><img src="./images/blog-thumb1.jpg" alt="" /></a></li>
				<li><a href="#"><img src="./images/blog-thumb2.jpg" alt="" /></a></li>
				<li><a href="#"><img src="./images/blog-thumb3.jpg" alt="" /></a></li>
				<li><a href="#"><img src="./images/blog-thumb4.jpg" alt="" /></a></li>
				<li><a href="#"><img src="./images/blog-thumb1.jpg" alt="" /></a></li>
			</ul><!--ENDS ul-->
		</div><!--END flickr-->

		<div>
		<h4>Latest posts</h4>
		<ul class="posts">
			<li>
			<h1>Jan</h1>
			<div class="listing">
			<p>7, 2010</p>
			<a href="#">Lorem ipsum dolor sit amet</a>
			</div>
			</li>

			<li>
			<h1>Jan</h1>
			<div class="listing">
			<p>29, 2010</p>
			<a href="#">At vero eos et accusamus et iusto</a>
			</div>
			</li>

			<li>
			<h1>Feb</h1>
			<div class="listing">
			<p>25, 2010</p>
			<a href="#">Cras lobortis mauris vel diam</a>
			</div>
			</li>

			<li>
			<h1>Mar</h1>
			<div class="listing">
			<p>17, 2010</p>
			<a href="#">Duis aute irure dolor in reprehenderit</a>
			</div>
			</li>
			</ul><!--END posts-->
		</div><!--END div-->


		<div>
		<h4>Newsletter</h4>
		<p>Our newsletter is awesome. Subscribe and get the latest updates. Spam free..</p>

			<form id="newsletter" name="newsletter" action="#" method="post">
				<input type="text" id="newsletter1" onfocus="if (this.value == 'Enter your name') {this.value = ''; }" onblur="if (this.value == ''){this.value = 'Enter your name'; }" value="Enter your name" />
				<input type="text" id="newsletter2" onfocus="if (this.value == 'Enter your email') {this.value = ''; }" onblur="if (this.value == ''){this.value = 'Enter your email'; }" value="Enter your email" class="required email" />
				<input name="Submit" type="submit" class="submit" value="Submit" />
			</form>
			<!--END newsletter-->

				<ul class="socialize">
					<li class="toolTip" title="Flickr"><a href="#"><img src="./images/social-icon1.png" alt="1" /></a></li>
				<li class="toolTip" title="Reddit"><a href="#"><img src="./images/social-icon2.png" alt="2" /></a></li>
				<li class="toolTip" title="Wordpress"><a href="#"><img src="./images/social-icon3.png" alt="3" /></a></li>
				<li class="toolTip" title="Facebook"><a href="#"><img src="./images/social-icon4.png" alt="4" /></a></li>
				<li class="toolTip" title="Stumbleupon"><a href="#"><img src="./images/social-icon5.png" alt="5" /></a></li>
				</ul><!--END socialize ul-->
		</div><!--END div-->
	</div><!--END bottom-->
</div><!--END bottom-box-->

<div class="footer">
	<div class="copyright">
		<ul>
			<li><a href="./index.html">Home</a></li>
			<li><a href="./about.html">About</a></li>
			<li><a href="./services.html">Services</a></li>
			<li><a href="./elements.html">Features</a></li>
			<li><a href="./portfolio.html">Portfolio</a></li>
			<li><a href="./blog.html">Blog</a></li>
			<li><a href="./contact.html">Contact</a></li>
		</ul>
	<p>© Copyright 2010 Your web site name. All rights reserved.</p>
	</div><!--END copyright-->

</div><!--END footer-->

</div><!--END wrapper-->

<!-- Tooltip JavaScript File -->
<script type="text/javascript" src="./javascript/tooltip.js"></script>

</body>
</html>